<template>
  <!-- 首页 -->
  <el-container :style="{ height: container.height }">
    <el-aside width="200px" style="background-color: #fff">
      <el-menu router background-color="#fff" @select="handleSelect" text-color="#464646" active-text-color="#3877f9" style="width: 100%; border: 0; padding-top: 20px" :default-active="defaultActive">
        <el-menu-item index="/admin/homePage">
          <template slot="title">
            <i class="el-icon-monitor" style="color: #464646"></i>
            <span>首页</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/admin/memoList">
          <template slot="title">
            <i class="el-icon-notebook-1" style="color: #464646"></i>
            <span>备忘录管理</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/admin/curriculumList">
          <template slot="title">
            <i class="el-icon-date" style="color: #464646"></i>
            <span>课程管理</span>
          </template>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container style="background-color: #eee">
      <el-header style="height: 40px; background-color: #fff">
        <el-breadcrumb separator="/" style="line-height: 40px; margin-left: 15px">
          <el-breadcrumb-item v-for="(item, index) in $route.meta" :key="index">
            <router-link v-if="item.url" :to="item.url">{{item.name}}</router-link>
            <a v-else>{{ item.name }}</a>
          </el-breadcrumb-item>
          <div style="float:right;margin-right:20px">
            <el-dropdown trigger="click" @command="handleCommand">
              <div class="el-dropdown-link">
                <span style="margin-left:12px">{{ account }}</span>
                <i class="el-icon-arrow-down el-icon--right"></i>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="2">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-breadcrumb>
      </el-header>
      <el-main :style="{padding: '0px',margin: '0px',overflow: 'auto',height: mainStyle.height,margin:'10px 10px'}">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      defaultActive:localStorage.getItem("defaultActive"),
      mainStyle: { height: "0px" },
      container: { height: "0px" },
      account:localStorage.getItem("account")
    };
  },
  mounted() {
    this.initHeight();
    window.onresize = () => {
      return (() => {
        this.initHeight();
      })();
    };
  },
  methods: {
    initHeight() {
      //el-main高度自适应
      this.windowHeight =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight; //浏览器高度
      this.mainStyle.height = this.windowHeight - 40 + "px";
      this.container.height = this.windowHeight + "px";
    },
    handleCommand(command) {
      if (command === "2") {
        localStorage.removeItem("userId");
        localStorage.removeItem("account");
        this.$router.push("/");
      }
    },
    handleSelect(index){
      localStorage.setItem("defaultActive",index)
    },
  },
};
</script>

<style>
.el-submenu__title {
  padding-left: 40px !important;
}
.el-menu-item {
  padding-left: 40px !important;
}
.el-submenu .el-menu-item {
  padding-left: 60px !important;
  text-align: center;
}

.avatar {
  width: 120px;
  height: 120px;
  display: block;
}

.avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
</style>
